<template>
  <div class="room">
    <main style="max-width: 1024px;margin: 0 auto;margin-top: 1rem;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/room' }">房间列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="padding-xl">
        <el-tabs type="border-card">
          <el-tab-pane label="房间列表">
            <room-sechar @serch_room="serch_room" :serch_list.sync="serch_list"></room-sechar>
            <div v-if="room_list">
              <div class="margin-top-x ds-flex" style="max-width: 800px;margin: 0 auto;margin-top: 1rem;"
                v-for="(item,index) in room_list" :key="index">
                <el-image v-if="item.picture" style="width: 180px; height: 120px" :src="getAjaxUrl()+item.picture"
                  fit="scale-down"></el-image>
                <el-image v-if="!item.picture" style="width: 180px; height: 120px" src="" fit="scale-down">
                </el-image>
                <div class="jcsb width-max">
                  <div class="jccnsb padding-l">
                    <div>{{item.dsc}}</div>
                    <div>{{item.commodity_id}}</div>
                    <div>
                      <el-tag type="primary">￥{{item.price}}</el-tag>
                    </div>
                  </div>
                  <div class="ds-flex items-center ">
                    <el-button type="primary" @click="user_room(item.rno)">预订</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="margin-top-x  width-max text-center size-x" v-else>
              ￣へ￣
              <br />
              没有剩余房间
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的预订">
            <div v-if="room_list_me">
              <el-table :data="room_list_me" style="width: 100%">
                <el-table-column label="房间号">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.rno }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="入驻日期" width="180">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.start_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="离店日期" width="180">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.end_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="预订状态" width="180">
                  <template slot-scope="scope">
                    <span>{{ scope.row.status }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否取消" width="180">
                  <template slot-scope="scope">
                    <span>{{ scope.row.is_cancel }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" v-if="scope.row.status=='已预订'"
                      @click="user_qx_room(scope.row)">取消预订
                    </el-button>
                    <el-button type="" v-if="scope.row.status!='已预订'">无法取消</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的订单">
            <div v-if="my_order_info_me">
              <el-table :data="my_order_info_me" style="width: 100%">
                <el-table-column label="订单编号">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.ono }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户名">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.uno }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="房间号">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.rno }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="入驻日期" width="180">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.start_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="离店日期" width="180">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.end_time }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </main>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        activeName: 'first',
        serch_list: {
          "in_time": "",
          "out_time": "",
          "commodity_id": "所有类型",
          "price": "0-99999"
        },
        room_list_me: null,
        room_list: [],
        my_order_info_me: null
      }
    },
    watch: {},
    mounted() {
      // 获取日期
      var day2 = new Date();
      day2.setTime(day2.getTime());
      var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
      var s3 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + (day2.getDate() + 1);
      this.serch_list.in_time = s2
      this.serch_list.out_time = s3
      this.serch_room()
      this.my_order_info()
      this.my_order_info1()
    },
    methods: {
      // 用户取消预订房间
      user_qx_room(item) {
        let that = this
        let request_url = this.getAjaxUrl() + '/api/user/my_book_info';
        let up_data = {
          "start_time": item.start_time,
          "end_time": item.end_time,
          "rno": item.rno,
          "id": item.id
        }
        let ajax_dict = {
          method: "POST",
          url: request_url,
          data: up_data,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.my_order_info()
            that.$message({
              message: '取消成功',
              type: 'success'
            });
            console.log(res);
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });
      },
      // 用户预订房间
      user_room(index) {
        let that = this
        let request_url = this.getAjaxUrl() + '/api/user/book_room';
        let up_data = {
          "start_time": this.serch_list.in_time,
          "end_time": this.serch_list.out_time,
          "uno": that.get_user_info().uno,
          "rno": index.toString()
        }
        let ajax_dict = {
          method: "POST",
          url: request_url,
          data: up_data,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.my_order_info()
            that.$message({
              message: '预订成功',
              type: 'success'
            });
            console.log(res);
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });
      },
      // 我的房间
      my_order_info() {
        let that = this;
        let request_url = this.getAjaxUrl() + '/api/user/my_book_info?current=1&size=1000';
        let ajax_dict = {
          method: "GET",
          url: request_url,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            console.log(res);
            that.room_list_me = res.data.infos
            console.log(that.room_list_me)
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });

      },
      //我的订单
      my_order_info1() {
        let that = this;
        let request_url = this.getAjaxUrl() + '/api/user/my_order_info?current=1&size=1000';
        let ajax_dict = {
          method: "GET",
          url: request_url,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            console.log(res);
            that.my_order_info_me = res.data.infos
            console.log(that.my_order_info_me)
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });
      },
      // 搜索可预订的房间
      serch_room() {
        let that = this;
        let request_url = this.getAjaxUrl() + '/api/user/search?current=1&size=1000';
        let up_data = this.serch_list
        let ajax_dict = {
          method: "GET",
          url: request_url,
          params: up_data,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            console.log(res);
            that.room_list = res.data.infos
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });

      },
      // axios 请求
      axios_ex(url, up_data, method, sd) {
        //alert('进入登录请求')
        let that = this;
        let request_url = this.getAjaxUrl() + url;
        let ajax_dict = {}
        if (method == 'GET') {
          console.log(up_data)
          ajax_dict = {
            method: method,
            url: request_url,
            params: up_data,
            withCredentials: true,
          }
        } else {
          ajax_dict = {
            method: method,
            url: request_url,
            data: up_data,
            withCredentials: true,
          }
        }
        axios(ajax_dict)
          .then(function(res) {})
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
            if (url == '/login') {
              alert('用户名密码错误');
            }
          });
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
